
import { inject, observer } from 'mobx-react';
import { toJS } from "mobx";
import { WeaTools,WeaTop, WeaTab, WeaRightMenu, WeaErrorPage, WeaLeftRightLayout, WeaLeftTree, WeaAlertPage, WeaNewScroll } from 'ecCom';
import * as cct from '../../../constants/CommonConstant';
import { Button, Spin } from 'antd';
// import weaCube from 'weaCube';
// const ExcelLayoutCom = weaCube.common.ExcelLayoutCom;
// const SingleShareDialog = weaCube.common.SingleShareDialog;
import Draft from './Draft';


@inject('contractCreateStore')
@observer
class ContractCreate extends React.Component {
    constructor(props) {
        super(props);
        window._cubeCard={
            reLoad:this.showCardCallBack,
            editCard:this.editCard,
            delCard:this.delCard
        }
    }
    
    delCard=()=>{
        //只读页面点击删除按钮后，清空页面
        window.location.href=`#/main/contract/bills/create`;
        let {contractCreateStore} = this.props;
        contractCreateStore.reLoad();
    }

    editCard=(params)=>{
        //只读页面点击编辑按钮后，显示编辑页面
        if(params){
            let {contractCreateStore} = this.props;
            contractCreateStore.setBill(params);
        }
        return null;
    }

    showCardCallBack=(billid)=>{
        //保存动作，保存完成后显示只读页面
        let {contractCreateStore} = this.props;
        let modeInfo = toJS(contractCreateStore.modeInfo);
        if(billid){
            modeInfo = {...contractCreateStore.modeInfo,...{billid:billid,type:0}};
        }
        contractCreateStore.setBill(modeInfo);
        return null;
    }


    componentDidMount(){
        if(window.weaCube){
            this.doInit(this.props);
        }else{
            eventRegister.loadModule('f_cube', ()=> {
                this.doInit(this.props);
            })
        }

        // const {contractCreateStore} = this.props;
        // let contract_table_width = ReactDOM.findDOMNode(this.refs.wea_contract_contractPage).scrollWidth-250;
        // contractCreateStore.initContentWidth(contract_table_width);
        // contractCreateStore.initWF();
        // contractCreateStore.initTree();
        // contractCreateStore.initMode();
    }

    doInit(props){
        const {contractCreateStore} = props;
        let contract_table_width = ReactDOM.findDOMNode(this.refs.wea_contract_contractPage).scrollWidth-250;
        contractCreateStore.initContentWidth(contract_table_width);
        contractCreateStore.initWF();
        contractCreateStore.initTree();
        contractCreateStore.initMode();
    }

    componentWillUnmount(){
        window._cubeCard={}
    }

    render() {
        const {contractCreateStore} = this.props;
        const {tabKey,value,tabsInfo,Card} = contractCreateStore;
        const tabContent = this.getTabContent();

        const showSearch = {};
        if(tabKey=="2"){
            showSearch.searchType=['base'];
            showSearch.searchsBaseValue = value;
            showSearch.onSearchChange=this.doSearch.bind(this);
        }


        return (
            <div className="wf-create-main">
                <WeaRightMenu datas={tabKey=="1"&&window.weaCube&&Card.isInit&&Card.cardTab&&Card.cardTab.rightMenus?Card.cardTab.rightMenus.slice():[]} onClick={tabKey=="1"&&window.weaCube&&Card.cardTab&&Card.cardTab.rightMenus&&Card.cardTab.rightMenuHandlerightMenuHandle}>
                    <WeaTop
                        title={"合同新建"}
                        icon={<i className={cct.icon} />}
                        iconBgcolor={cct.iconBgcolor}
                        buttons={this.getButtons()}
                    >
                        <WeaTab
                            datas={tabsInfo}
                            selectedKey={tabKey}
                            keyParam="key"  //主键
                            onChange={(tabKey)=>contractCreateStore.changeTab(tabKey)}
                            buttons={[]}
                            {...showSearch}
                        />
                            
                            <div style={{height:'calc(100% - 47px)'}}>
                                <WeaNewScroll height='100%'>
                                    {tabContent}
                                </WeaNewScroll>
                            </div>
                    </WeaTop>
                </WeaRightMenu>
                
            </div>
            
        );
    };
    doSearch(v) {
		const {contractCreateStore} = this.props;
		contractCreateStore.setSearchValue(v);
		jQuery(".wea-wf-add-content").scrollTop(0);
    }
    
    getButtons(){
		const {contractCreateStore} = this.props;
		const {isAbc,tabKey} = contractCreateStore;
		return [
            //("1"===tabKey && <Button>合同模板库</Button>),
		 	("2"===tabKey && <i className={"icon-button icon-New-Flow-Letter" + (isAbc ? ' wea-new-top-btn-clicked' : '')} onClick={this.showABC.bind(this)}/>)
		]
	}

    getTabContent = ()=>{
        const {contractCreateStore} = this.props;
        const {Card,tabKey,showCard,modeInfo} = contractCreateStore;

        let ExcelLayoutCom = {};
        let SingleShareDialog = {};
        if(window.weaCube){
            ExcelLayoutCom = weaCube.common.ExcelLayoutCom;
            SingleShareDialog = weaCube.common.SingleShareDialog;
        }
        if("1"===tabKey){
            return <div style={{height:'100%'}} ref="wea_contract_contractPage">
                        <WeaLeftRightLayout
                            isNew={true}
                            leftWidth={200}
                            leftCom={<div style={{ width: '100%', height: '100%' }} >
                                <WeaLeftTree 
                                    datas={toJS(contractCreateStore.contractType)} 
                                    onSelect={(key,topTabCount,countsType)=>contractCreateStore.getLayoutInfo({cons_type:key})}
                                    cancelSelectable={false}
                                />
                            </div>}
                        >
                        <WeaNewScroll height='100%'>
                            {showCard?<div  className="wea-contract-contractPage">
                                <div className="coms-mode-docker coms-mode-card wea-contract-contractPage-add">
                                    <Spin spinning={Card.loading}>
                                        {window.weaCube&&Card.isInit ? [<ExcelLayoutCom Card={Card} />,
                                        <SingleShareDialog
                                            share={Card.share}
                                            formId={Card.base.formId}
                                            modeId={Card.base.modeId}
                                            nonDefaultShared={Card.base.nondefaultshared}
                                            defaultShared={Card.base.defaultshared}
                                            type='0'
                                        />] 
                                        : <div style={{marginTop:'50%'}}  />}
                                    </Spin>
                                </div>
                            </div>
                            :
                            <div style={{position : 'relative', height : 230}}>
                                <WeaAlertPage {...this.state} >
                                        <div style={{color : '#000'}}>
                                        请选择合同类型 ！
                                    </div>
                                </WeaAlertPage>
                            </div>
                            }
                        </WeaNewScroll>
                    </WeaLeftRightLayout>
                </div>;
        }else if("2"===tabKey){
            return <div className='wea-wf-add-content' ><Draft /></div>;
        }else if("3"===tabKey){
            return <iframe src={`/spa/cube/engine.html#/cubeengine/app/modebatchimport?modeid=${modeInfo.modeId}`} id="tabcontentframe" name="tabcontentframe" width="100%" height="100%" frameBorder={0} scrolling="no"  />;
        }else{
            return <div></div>;
        }
    }

    showABC(){
		const {contractCreateStore} = this.props;
		const {isAbc} = contractCreateStore;
		contractCreateStore.setIsAbc(!isAbc);
		jQuery(".wea-wf-add-content").scrollTop(0);
    }

}

export default WeaTools.tryCatch(React,
    props => <WeaErrorPage msg={ props.error ? props.error : '对不起，该页面异常，请联系管理员！'} />,
    {error: ""}
)(ContractCreate);